import routeJson from './json/sourceAnalysis.json' // 来源简析
import rendererJson from './json/renderer.json'    // 热力图
import cluster from './json/cluster.json'          // 聚合点
import graphic from './json/graphic.json'          // 海量点
import byOption from './json/byOption.json'        // 公交线
import Echarts from 'echarts'

export default {
	removeAllGis(){ // 删除全部
		mymap.removeEchartsLayer("sourceAnalysis")  // 来源解析
		// mymap.removeLayer("heatMap")                // 热力图 
		mymap.RemoveClusterlayer("clusters")        // 聚合点
		// mymap.removeLayer("point")                  // 海量点
		mymap.removeLayer("count")                  // 图表展示
	},
	routeGis(url){  // 来源解析  关动画
		let lineData = []   // 轨迹线的数据
		let pointData = []  // 轨迹来源点的数据轨迹来源点的数据

		routeJson.map(function(data,index){
            if (data.PERCENTVAL < 3){   // 接收城市为Other
                return false
            }
			let arr = [
                {
                    coord: [
                        data.END1[0],
                        data.END1[1]
                    ]
                },
                {
                	coord: [
                        data.START1[0],
                        data.START1[1]
                    ]
                }
            ]

            let obj = {
                name: data.SOURCEREGIONNAME,
                value: [
                    data.END1[0],
                    data.END1[1],
                    20   // 黄色标记的大小
                ]
            }
			lineData.push(arr)  // 轨迹线的数据
			pointData.push(obj) // 轨迹来源点的数据
		})

        let option = {   // 主要配置对象
            tooltip: {
                trigger: 'item'
            },
            formatter: '{b}',
            animation: false,
            geo: {},
            series: [
            	{
	                name: '线',
	                type: 'lines',
	                zlevel: 1,
	                lineStyle: {
	                    normal: {
	                        width: 0,
	                        curveness: 0.5,
	                        color: 'rgb(116,224,224)'
	                    }
	                },
	                effect: {
	                    constantSpeed: 35,
	                    show: true,
	                    trailLength: 0.3,
	                    symbolSize: 3
	                },
	                data: lineData   // 轨迹线的数据
	            },
                {
                    name: '线',
                    type: 'lines',
                    zlevel: 0,
                    animation: false,
                    lineStyle: {
                        normal: {
                            color: 'rgb(28,105,108)',
                            width: 2,
                            opacity: 0.9,
                            curveness: 0.5,
                            shadowColor: '#ffff00',
                            shadowBlur: 30,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    },
                    data: lineData   // 轨迹线的数据
                },
                {
                    name: '点',
                    animation: false,
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 0,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    symbolSize: function(evt){
                        return evt[2]
                    },
                    itemStyle: {
                        normal: {
                            color: '#ffff00',
                            shadowColor: 'rgb(0,255,0)',
                            shadowBlur: 30,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{b}',
                            textStyle: {
                                color: 'rgb(255,255,255)'
                            }
                        }
                    },
                    data: pointData  // 轨迹来源点的数据
                }
            ]
		}
		mymap.addEchartsLayerByOption("sourceAnalysis", option , function(_overlay){
	        let overlay = _overlay    
	    })  
	    mymap.centerAndZoom(115.65, 37.59, 6)
	},
	rendererGis(){  // 热力图
		console.log(rendererJson)
		let layerDefinition = {
			"geometryType": "esriGeometryPoint",
			"objectIdField": "ObjectID",
			"drawingInfo": {
				"renderer": {
					"type": "simple",
					"symbol": {
						"color": [0, 48, 161, 255],
						"size": 4,
						"type": "esriSMS",
						"style": "esriSMSCircle"
					}
				}
			},
			"fields": [
				{
					"name": "ObjectID",
					"alias": "ObjectID",
					"type": "esriFieldTypeOID"
				}, {
					"name": "val",
					"alias": "val",
					"type": "esriFieldTypeDouble"
				}, {
					"name": "pscode",
					"alias": "pscode",
					"type": "esriFieldTypeString"
				}, {
					"name": "pollutantcode",
					"alias": "pollutantcode",
					"type": "esriFieldTypeString"
				}
			]
		}
		let featureCollection = {
			"layerDefinition": layerDefinition,
			"featureSet": {
				"features": rendererJson,
				"geometryType": "esriGeometryPoint"
			}
		}
		let tmap = {
			"type": "heatmap",
			"blurRadius": 15,
			"colorStops": [
				{
					value: 10,
					color: "rgba(245, 255, 255, 0)"
				},
				{
					value: 60000,
					color: "rgb(253, 233, 191)"
				},
				{
					value: 66000,
					color: "rgb(255, 255, 100)"
				},
				{
					value: 80000,
					color: "rgb(255, 255, 20)"
				},
				{
					value: 100000,
					color: "rgb(250, 240, 100)"
				},
				{
					value: 150000,
					color: "rgb(250, 220, 100)"
				},
				{
					value: 250000,
					color: "rgb(255, 182, 0)"
				},
				{
					value: 350000,
					color: "rgb(215, 145, 10)"
				},
				{
					value: 500000,
					color: "rgb(225, 119, 100)"
				},
				{
					value: 600000,
					color: "rgb(255, 90, 120)"
				},
				{
					value: 700000,
					color: "rgb(155, 70, 150)"
				},
				{
					value: 800000,
					color: "rgb(155, 50, 180)"
				},
				{
					value: 1000000,
					color: "rgb(155, 20, 200)"
				},
				{
					value: 1200000,
					color: "rgb(155, 10, 0)"
				},
				{
					value: 2500000,
					color: "rgb(176, 19, 19)"
				}
			],
			"field": 'val'
		}
		mymap.addFeatureLayer2("heatMap", featureCollection)
		mymap.applyHeatmapRenderer2("heatMap", tmap)
		mymap.centerAndZoom(107.27, 39.29, 8)
	},
	clusterGis(){   // 聚合点
        let options = {
            "data": cluster,  //Object[]，对象必须有X、Y,attributes命名。X和Y坐标必须是代表一个点坐标的数字。
            "distance": 30,   //Number?聚合点间的最大距离，默认为50。
            "layerid": "clusters",//聚合图层的id
            "labelColor": "#fff",// String?聚合点标签上数字的颜色。默认值是 #fff (白).
            "labelOffset": 10,//String?垂直偏移的聚合点标签的像素值。默认为-5。IE中不能使用。
            "showSingles": "false",//Boolean?，单击聚合点时，是否显示离散点。默认为true。
            "spatialReference": {wkid: 4326}//SpatialReference? 图层中所有点的空间参考. 必须和地图的空间参考匹配.默认为102100.如果是basemaps 则是web mercator.
        }
        let renderercolor = {
            "type": "classBreaks",
            "field": "clusterCount",
            "minValue": 0,
            "defaultSymbol": {
                "color": [11, 126, 217, 200],
                "outline": {
                    "color": [255, 125, 3, 1, 200],
                    "width": 20,
                    "type": "esriSLS",
                    "style": "esriSLSNull"
                },
                "type": "esriSFS",
                "style": "esriSFSSolid"
            },
            "classBreakInfos": [{
	                "symbol": {
	                    "color": [80, 204, 0, 200],
	                    "size": 20,
	                    "angle": 0,
	                    "xoffset": 0,
	                    "yoffset": 11,
	                    "type": "esriSMS",
	                    "style": "esriSMSCircle",
	                    "outline": {
	                        "color": [255, 125, 3, 0], "width": 1,
	                        "type": "esriSLS", "style": "esriSLSSolid"
	                    }
	                }, "classMaxValue": 2, "label": ".000000", "description": ""
            	},{
                    "symbol": {
                        "color": [255, 125, 3, 200],
                        "size": 30,
                        "angle": 0,
                        "xoffset": 0,
                        "yoffset": 11,
                        "type": "esriSMS",
                        "style": "esriSMSCircle",
                        "outline": {
                            "color": [255, 23, 58, 0], "width": 1,
                            "type": "esriSLS", "style": "esriSLSSolid"
                        }
                    }, "classMaxValue": 50, "label": ".000000", "description": ""
                }, {
                    "symbol": {
                        "color": [255, 23, 58, 200],
                        "size": 40,
                        "angle": 0,
                        "xoffset": 0,
                        "yoffset": 10,
                        "type": "esriSMS",
                        "style": "esriSMSCircle",
                        "outline": {
                            "color": [255, 23, 58, 0], "width": 1,
                            "type": "esriSLS", "style": "esriSLSSolid"
                        }
                    }, "classMaxValue": 115, "label": ".000000", "description": ""
                }]
        }
        mymap.addClusterLayer(renderercolor, options)
        mymap.centerAndZoom(107.27, 39.29, 7)
	},
	graphicGIS(){   // 海量点
    	let pointjson = []
		graphic.map((a,b) => {
			pointjson.push({
                "geometry": {
                    "x": a.longitude, 
                    "y": a.latitude,  
                    "spatialReference": {"wkid": 4326}
                },
                "attributes": {
                    "Name": a.companyname,
                    "Address": a.name_trade,
                    "code": a.enterid
                },
                "symbol": {
		            "type": "esriPMS",
		            "url": "../images/" + a.pageSize + ".png", 
		            "width": 20, //当前图片宽度
		            "height": 50,//当前图片高度
		            "xoffset": 0,
		            "yoffset": -30
			    }
			})
		})
    	mymap.addGraphic("point", null, pointjson, {click: showinfowindow}) 
    	mymap.centerAndZoom(106.77, 39.39, 10)
	    function showinfowindow(event){
	        let n = event.graphic.attributes.Name
	        let b = event.graphic.attributes.Address
	        let c = event.graphic.attributes.code
	        let content = "企业名称：" + n + "<br>企业类型：" + b + "<br>企业编码：" + c
	        mymap.showPopupWindow("<span style='color:yellow'>企业信息</span>", content, event.graphic.geometry.x, event.graphic.geometry.y, null)
	    }
	},
	byOptionGIS(){  // 公交线
		console.log(byOption)
    	let busLines = []
    	let option = {}
    	let option1 = {}
        let busLines1 = getbusLines(byOption, true)
		    function getbusLines(data, islineStyle){
		        let hStep = 300 / (data.length - 1)
		        return busLines = [].concat.apply([], data.map(function (busLine, idx) {
		            let prevPt = 0
		            let points = []
		            for (let i = 0; i < busLine.length; i += 2){
		                let pt = [busLine[i], busLine[i + 1]]
		                if (i > 0) {
		                    pt = [
		                        prevPt[0] + pt[0],
		                        prevPt[1] + pt[1]
		                    ]
		                }
		                prevPt = pt
		                points.push([pt[0] / 1e4, pt[1] / 1e4])
		            }
		            if (islineStyle){

		                return {
		                    coords: points,
		                    lineStyle: {//设置每个数据列的颜色
		                        normal: {
		                            color: "rgba(200,90,90,1)" // echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
		                        }
		                    }
		                }
		            }
		            return {
		                coords: points
		            }
		        }))
		    }
            option1 = {
                geo: {}, // 地理坐标系组件，不可删除，设置为空即可
                series: [{   // 系列列表，每个系列通过 type 决定自己的图表类型
                    type: 'lines',   // 线图，用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视
                    polyline: true,   // 是否是多段线，true表示是
                    data: busLines1,   // 线数据集
                    silent: true,   // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件，true为不响应和触发鼠标事件
                    lineStyle: {   // 线的样式
                        normal: {
                            color: '#c23531',   // 线的颜色
                            opacity: 0.2,   // 不透明度，范围是0-1，数值越小越透明
                            width: 1   // 线宽
                        }
                    },
                    progressiveThreshold: 500,   // 启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染。
                    progressive: 200   // 渐进式渲染时每一帧绘制图形数量，设为 0 时不启用渐进式渲染，支持每个系列单独配置。
                }, {
                    type: 'lines',   // 线图，用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视
                    polyline: true,   // 是否是多段线，true表示是
                    data: busLines1,   // 线数据集
                    lineStyle: {   // 线的样式
                        normal: {
                            width: 0   // 线宽
                        }
                    },
                    effect: {   // 线特效的配置
                        constantSpeed: 20,   // 配置特效图形的移动动画是否是固定速度，单位像素/秒，设置为大于 0 的值后会忽略 period 配置项
                        show: true,   // 是否显示特效
                        trailLength: 0.1,   // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
                        symbolSize: 1.5   // 特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10
                    },
                    zlevel: 1   // 线图所有图形的 zlevel 值，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
                }]
            }
	        mymap.addEchartsLayerByOption("chartlayer", option1, function () {   // 根据option的json进行渲染，第一个参数是图层名字，第二个参数是传入图层设置的json，第三个参数是回调函数，返回添加的图层
	        })
	},
	countGIS(type){ // 图表展示 
		let countJson = [{"y": 39.480556,"x": 106.688889,"val": 1},{"y": 39.869167,"x": 106.883056,"val": 2},{"y": 39.804167,"x": 106.570556,"val": 3}]
    	let pointjson = []
		countJson.map((a,b) => {
			pointjson.push({
                "geometry": {
                    "x": a.x, 
                    "y": a.y,  
                    "spatialReference": {"wkid": 4326}
                },
                "attributes": {
                    "Name": a.companyname,
                    "Address": a.name_trade,
                    "code": a.enterid
                },
                "symbol": {
		            "type": "esriPMS",
		            "url": "../images/a" + a.val + ".png", 
		            "width": 32, //当前图片宽度
		            "height": 32,//当前图片高度
		            "xoffset": 0,
		            "yoffset": -10
			    }
			})
		})
    	mymap.addGraphic("count", null, pointjson, {click: showinfowindow}) 
		mymap.centerAndZoom(106.75, 39.59, 9)
    	let _this = this
	    function showinfowindow(event){
	    	let div = "<div id='myechartswrap' style='width:250px;height:150px;'></div>"
	        mymap.showPopupWindow("<span style='color:yellow'>统计数据</span>", div, event.graphic.geometry.x, event.graphic.geometry.y, null)
	    	
	    	_this.getEcharts(type)
	    }
	},
	getEcharts(type){  // 加载Echarts
		let myType = type || "折线图"
		let myOption = null
		if (myType == '折线图'){
			myOption = {
			    legend: {
			        left: 'left',
			        data: ['2的指数', '3的指数']
			    },
			    xAxis: {
			        data: ['一', '二', '三', '四', '五']
			    },
			    grid: {
			        left: '2%',
			        right: '6%',
			        bottom: '3%',
			        top: '6%',
			        containLabel: true
			    },
			    yAxis: {
			    },
			    series: [
			        {
			            type: 'line',
			            data: [3, 6, 19, 27, 30]
			        }
			    ]
			}
		} else if (myType == '柱状图'){
			myOption = {
			    legend: {
			        left: 'left',
			        data: ['2的指数', '3的指数']
			    },
			    xAxis: {
			        data: ['一', '二', '三', '四', '五']
			    },
			    grid: {
			        left: '2%',
			        right: '6%',
			        bottom: '3%',
			        top: '6%',
			        containLabel: true
			    },
			    yAxis: {
			    },
			    series: [
			        {
			            type: 'bar',
			            data: [8, 6, 9, 12, 15]
			        }
			    ]
			}
		} else if (myType == '统计饼图'){
			myOption = {
			    series: [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius: '70%',
			            center: ['50%', '50%'],
			            data: [
			                {value: 335, name: 'CO2'},
			                {value: 310, name: 'PM25'},
			                {value: 234, name: 'NO'},
			                {value: 135, name: 'O3'},
			                {value: 148, name: 'CO'}
			            ]
			        }
			    ]
			}
		} else if (myType == '散点图'){
			myOption = {
			    grid: {
			        left: '2%',
			        right: '6%',
			        bottom: '3%',
			        top: '6%',
			        containLabel: true
			    },
			    xAxis: [
			        {
			            type: 'value',
			            scale: true
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            scale: true
			        }
			    ],
			    series: [
			        {
			            name: '女性',
			            type: 'scatter',
			            data: [[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
			                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
			                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
			                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
			                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
			                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
			                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
			                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
			                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
			                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
			                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
			            ]
			        }
			    ]
			}
		} else if (myType == '轮播图'){
		}

	    console.log(mymap.myechartswrap,myType)
        let myChart = Echarts.init(mymap.myechartswrap)
        myChart.setOption(myOption)
	}
}
